<template>
  <div class="details">
    <div class="details-shell">
      <!--小说信息-->
      <div class="details-info">
        <img :src="movieList.posterPath" alt="小说图片">
        <div class="novel-info">
          <h1>{{ movieList.title }}</h1>
          <p>导演：{{ movieList.directors }}</p>
          <p class="actors">主演：{{ movieList.actors }}</p>
          <p>类别：{{ movieList.genres }}</p>
          <p>时长：{{ movieList.runtime }}</p>
          <p>
            上映时间：{{ movieList.releaseDate }}
          </p>
          <p>
            语言：{{ movieList.languages }}
          </p>
          <p>评分：{{ movieList.avgRating }}分</p>
          <div class="btn-box">
            <a class="read" href="#"> 立即观看 </a>
            <div class="btn-icon">
              <a href="#" @click="aLikesClickEvent">
                <i v-if="statusData.likes" class="el-icon-star-on"></i>
                <i v-else class="el-icon-star-off"></i>
                <span>评论</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--小说简介-->
      <div class="details-card">
        <h1>电影简介</h1>
        <p>{{ movieList.plotSummary }}</p>
      </div>
      <!--相似电影-->
<!--      <div class="details-card">-->
<!--        <h1>相似电影</h1>-->
<!--        <div class="novel-similar">-->
<!--          <ul>-->
<!--            <li v-for="(movie,index) in movieSimilar" :key="index">-->
<!--              <img :src="movie.posterPath" alt="电影图片">-->
<!--              <a @click="detailsId(movie.movieId)"><h2>{{ movie.title }}</h2></a>-->
<!--              <span>{{ movie.genres }}</span>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
      <div class="details-card">
        <h1>相似电影</h1>
        <div class="novel-similar">
          <ul class="movie-list">
            <li v-for="(movie,index) in movieSimilar" :key="index">
              <div class="movie-item">
                <img :src="movie.posterPath" alt="电影图片">
                <a @click="detailsId(movie.movieId)"><h2>{{ movie.title }}</h2></a>
                <span class="genres">{{ movie.genres }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <template v-if="showEvaluate">
      <el-dialog title="评价" :visible.sync="showEvaluate" :close-on-click-modal="false">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="电影名称">
            <p>{{ movieList.title }}</p>
            <template v-if="false"><span>{{ form.movieId }}</span></template>
          </el-form-item>
          <el-form-item label="评分">
            <el-rate v-model="form.star"></el-rate>
          </el-form-item>
          <el-form-item label="评论">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      movieList: {},
      clickParams: {
        username: localStorage.getItem("username"),
        novelId: null,
        novelName: null,
        novelCategory: null,
        clicks: 1,
        likes: 0,
        collects: 0,
        recommends: 0
      },
      statusData: {},
      movieSimilar: {},
      showEvaluate:false,//是否显示评论
      form:{
        movieId:"",//电影id
        star:0,//评分分值
        content:""//评论内容
      },
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.getData(newVal.query.id);
      }
    }
  },
  methods: {
    //获取电影信息
    async getData(movieId) {
      await request({url: `/movie/movie/${movieId}`, method: "GET"}).then(
          response => {
            this.movieList = response.data.data;
            //   //获取相似电影数据接口
            this.getNovelSimilar();
          }
      );
    },
    //获取相似电影数据接口
    getNovelSimilar() {
      console.log("-----------*********");
      const movieId = this.movieList.movieId; // 从 movieList 中获取 movieId
      // 使用模板字符串来构建 URL，并使用反引号包裹整个字符串
      request({url: `/movie/movie/similartab/${movieId}`, method: "GET"})
          .then(result => {
            this.movieSimilar = result.data.data;
            console.log("相似电影数据:", this.movieSimilar)
          })
          .catch(error => {
            console.error("获取相似电影数据失败:", error);
          });
    },
    //用户点赞行为记录
    aLikesClickEvent() {
      this.showEvaluate = true
    },
    //用户点赞行为记录接口
    likesRequest() {
      request({url: "/movie/review",
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        data: this.form}).then(result => {
        this.statusData = result.data;
        if (this.statusData.code !== 200) {
          this.$message({
            message: this.statusData.msg,
            type: 'error'
          });
        } else {
          this.$message({
            message: '评论成功',
            type: 'success'
          });
          this.showEvaluate = false
        }
        console.log("-----likesStatusData-------", this.statusData);
      });
    },
    onSubmit(){
      //提交表单
      /*if (this.statusData.likes) {
        this.statusData.likes = 0;
        this.clickParams.likes = this.statusData.likes;
      } else {
        this.statusData.likes = 1;
        this.clickParams.likes = this.statusData.likes;
      }*/
      this.form.movieId = this.movieList.movieId;
      this.likesRequest();
    },
    // 跳转详情页
    detailsId(id) {
      console.log('^^^^^^id^^^^^^', id)
      this.$router.push({
        path: '/details',
        query: {id: id}
      })
    },
  },
}
</script>

<style>
.details {
  /* background-image: url("../../assets/image/bg1.jpg"); */
  background-size: 100% 100%;
}

.details-shell {
  margin: 0 auto;
  padding-top: 100px;
  width: 1200px;
}

.details-info {
  display: flex;
  justify-content: left;
}

.details-info img {
  width: 200px;
  border-radius: 10px;
}

.novel-info {
  margin-left: 30px;
}

.novel-info h1 {
  font-size: 29px;
  color: #333333;
}

.novel-info a {
  color: #dd5d53;
  font-size: 19px;
  line-height: 40px;
}

.novel-info p {
  font-size: 14px;
  color: #666666;
  line-height: 22px;
}

.novel-info p span {
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
}

.btn-box {
  display: flex;
}

.btn-box .read {
  background: #cb3d30;
  padding: 0 14px;
  border-radius: 50px;
  color: #fff;
}

.btn-icon a {
  margin-left: 50px;
  color: #4d4c4d;
}

.details-card h1 {
  /*padding: 50px 0 10px 0;*/
  padding: 40px 0 10px 0;
  border-bottom: 1px solid #e9e9e9;
  color: #333338;
}

.details-card p {
  font-size: 16px;
  color: #848484;
  line-height: 30px;
  padding: 10px 0;
}


/******/
.movie-list {
  list-style-type: none;
  padding: 20px 0; /* 添加顶部和底部间距 */
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.movie-item {
  position: relative;
  margin: 10px;
  /*margin: 10px 10px 34px 10px;*/
  box-sizing: border-box;
  text-align: center;
}

.movie-item img {
  height: 190px;
  width: auto;
  border-radius: 8px;
}

.movie-item h2,
.movie-item span.genres{
  width:140px;
  font-size: 16px;
  margin-top: 10px;
  white-space: nowrap; /* 让文本不换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.movie-item span.genres {
  display: block;
  margin-top: 0px;
  font-size: 14px;
}

.actors {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设置最大行数为 3 */
  overflow: hidden;
}

</style>
